<template>
    <div class="jessibuca-div">
        <div class="jessibuca-btns" >
            <div class="jessibuca-ip" 
                @click="ipCallFn" v-show="playObj.playUrl && showTalk" title="语音">
                <AudioOutlined style="font-size: 20px;color: #fff;"/>
            </div>
            <div class="jessibuca-close" 
                @click="jessibucaClose" v-show="playObj.playUrl && showClose"  title="关闭">
                <CloseCircleOutlined style="font-size: 20px;color: #fff;"/>
            </div>
        </div>

        <div class="container"
            ref="container"></div>
    </div>
</template>


<script setup>
import { reactive, ref, defineEmits, watch, defineProps, onBeforeMount, onMounted, onBeforeUnmount } from 'vue'
import {CloseCircleOutlined,AudioOutlined} from '@ant-design/icons-vue';
const emit = defineEmits(['closeVideoOne','ipCallOne'])
const props = defineProps({
    playObj: {
        default: () => {},
        type: Object
    },
    showClose: {
        default: () => true,
        type: Boolean
    },
    showTalk: {
        default: () => true,
        type: Boolean
    }
})
let jessibuca = null,setTimer = null;
let container = ref(null)
onMounted(() => {
    create()
    
})
const create = () => {
    jessibuca = new window.Jessibuca({
        container: container.value,
        videoBuffer: 0, // 缓存时长
        isResize: false,
        // useWCS: this.useWCS,
        // useMSE: this.useMSE,
        text: "",
        // background: "bg.jpg",
        loadingText: "疯狂加载中...",
        // hasAudio:false,
        controlAutoHide: true,  // 底部控制台是否自动隐藏
        // debug: false,
        debug: false,
        supportDblclickFullscreen: true,
        showBandwidth: true, // 显示网速
        operateBtns: {
            fullscreen: true,
            screenshot: true,
            play: true,  //暂定有问题  注释掉
            audio: true,
            record: true,
        },
        useMSE: true,
        // vod: this.vod,
        // forceNoOffscreen: !this.useOffscreen,
        isNotMute: true,
        // timeout:13
        // loadingTimeout:15
    });
    // jessibuca.on("error", function (error) {
    //     console.log(error,'jessibuca--error');
    // })

    jessibuca.on("play", function (flag) {
        // console.log('play','jessibuca');
        window.clearTimeout(setTimer)
    })
    // 判断超时  无法播放出来的 主动关闭
    // jessibuca.on("timeout", function (error) {
    //     console.log('timeout:', error)
    //     // setTimeout(() => {
    //     //     let result = jessibuca.isPlaying();
    //     //     if(!result)jessibucaClose()
    //     // }, 1000);
    // })
    // jessibuca.on("loadingTimeout", function (error) {
    //     console.log('loadingTimeout:', error)
    // })
    // jessibuca.on("delayTimeout", function (error) {
    //     console.log('delayTimeout:', error)
    // })
    play()
    // setTimeout(() => {
        
    // }, 3000);
}
const ipCallFn =()=>{
    emit('ipCallOne',props.playObj)
}
const jessibucaClose= async() => {
    if (jessibuca) {
        emit('closeVideoOne',props.playObj)
        // await jessibuca.destroy();
    }
}
const play = () => {
    if (props.playObj.playUrl && jessibuca) {
        // console.log('jessibuca.play',props.playObj.playUrl);
        jessibuca.play(props.playObj.playUrl);
        // 30秒放不出来 就自动关闭
        window.clearTimeout(setTimer);
        setTimer = setTimeout(() => {
            jessibucaClose()
        }, 30000);
    }
}
onBeforeUnmount(async () => {
    if (jessibuca) {
        await jessibuca.destroy();
    }

    // this.loaded = false;
})
watch(() => props.playObj.playUrl, async (_val, oldVal) => {
    // console.log(_val, 'props.flvUrl 变化',oldVal);
    // if(_val!= oldVal){
    if(_val){
        play()
    }else{
        if (jessibuca){
            // await jessibuca.destroy();
            // create()
            // jessibuca.close();
            // jessibuca.clearView();
            jessibuca.destroy().then(()=>{
                create();
            });
        }

    }
});
// ,{immediate: true}
</script>


<style scoped lang='less'>
.jessibuca-div {
    width: 100%;
    height: 100%;
    padding: 0 6px 6px 0;
    position: relative;
    // .jessibuca-close{
    //     position: absolute;
    //     right: 10px;
    //     top: 10px;
    //     z-index: 1000;
    //     padding: 4px;
    //     cursor: pointer;
    // }
    .jessibuca-btns{
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 1000;
        padding: 4px;
        
        display: flex;
        >div{
            margin: 0 10px;
            cursor: pointer;
        }
    }
    .container {
        width: 100%;
        height: 100%;
        backdrop-filter: blur(5px);
        background: hsla(0, 0%, 50%, 0.5);
        // padding: 30px 4px 10px 4px;
        /* border: 2px solid black; */
        // width: auto;
        position: relative;
        // border-radius: 5px;
        // box-shadow: 0 10px 20px;
    }
}
</style>